<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #ccc;
        }
    </style>
    <script type="text/babel">
        class Child extends React.Component{
            constructor(...args){
                super(...args);
                this.num = 55;
            }

            render(){
                this.props.cd(this.num);
                return <div>{this.props.a}</div>;
            }
        }

        class Parent extends React.Component{
            constructor(...args){
                super(...args);
                this.a = 12;
            }

            fn(num){
                alert(num);
            }

            render(){
                return <div>
                    <div>aaaa</div>
                    <Child a={this.a} cd={this.fn.bind(this)}/>
                    <div>bbbb</div>
                </div>;
            }

        }



        window.onload = function () {
            var  oDiv = document.getElementById('root');

            ReactDOM.render(
                <Parent/>,
                oDiv
            );
        }
    </script>
</head>
<body>
<div id="root"></div>
</body>
</html>